<template>
	<view class="order-content">
		<view class="tip">
			<text class="type active" v-if="status==1">可使用</text>
			<text class="type" v-if="status==2">已核销</text>
			<text class="type" v-if="status==3">已过期</text>
			<text class="type" v-if="status==4">系统取消</text>
			<image src="../../static/uni.png" v-if="status==1" mode="widthFix" class="code"></image>
		</view>
		<view class="name">
			姓名：{{ username }}
		</view>
		<view class="time">
			时间：{{ date }} {{time}}
		</view>
		<view class="foot">
			<text class="btn" @click="goDetail">查看详情</text>
			<text class="btn cancel" v-if="status==1" @click="cancel">取消</text>
		</view>
	</view>
</template>

<script>
	import { CacelPreOrder } from '../../api/index.js'
	export default {
		name:"OrderContent",
		props:{
			username:{
				type:String,
				default:''
			},
			date:{
				type:String,
				default:''
			},
			time:{
				type:String,
				default:''
			},
			phone:{
				type:String,
				default:''
			},
			status:{
				type:Number,
				default:0
			},
			ids:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			goDetail(){
				uni.navigateTo({
					url:'/subPackage/MyOrderDetail/MyOrderDetail?username='
					+this.username+'&&date='+this.date+'&&status='+this.status
					+'&&time='+this.time+'&&phone='+this.phone+'&&id='+this.ids
				})
			},
			cancel(){
				uni.showModal({
					title:'温馨提示',
					content:'确认要取消吗？',
					cancelText:'取消',
					confirmText:'确定',
					success:async (res)=> {
						let myData={
							type:4
						}
						if(res.confirm){
							const {data:res} =await CacelPreOrder(2,myData)
							console.log(res,'rreeess')
							if(res.status==0){
								this.$emit('update')
							}
						}
						if(res.cancel){
							
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.order-content{
	background: #fff;
	border-radius: 20rpx;
	padding: 20rpx;
	position: relative;
	margin: 20rpx 0;
	.tip{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		top: 0;
		left: 0;
		
		// margin-bottom: 120rpx;
		.type{
			background: #eee;
			// color: #fff;
			border-radius: 10rpx 0;
			padding: 6rpx 10rpx;
			
		}
		.active{
			background: #0f0;
			color: #fff;
			border-radius: 10rpx 0;
		}
		.code{
			width: 40rpx;
		}
	}
	.name{
		font-weight: bold;
		margin-top: 40rpx;
	}
	.time{
		color:#999;
		line-height: 60rpx;
	}
	.foot{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.btn{
			width: 150rpx;
			background: #ccc;
			text-align: center;
			border-radius: 10rpx;
			font-size: 28rpx;
			margin: 0 10rpx;
			padding: 8rpx;
			
		}
		.cancel{
			background: #f1f1f1;
		}
	}
}
</style>